BemÀstra JavaScript Temporal API för modern datum- och tidshantering. LÀr dig ersÀtta gamla Date-objekt med ett kraftfullt, intuitivt och tidzonsmedvetet API.
JavaScript Temporal API: Modern Datum- och Tidshantering
JavaScript-objektet Date har lÀnge varit en kÀlla till frustration för utvecklare. Dess förÀnderlighet, brist pÄ inbyggt stöd för tidszoner och besvÀrliga API har lett till otaliga bibliotek och lösningar. Lyckligtvis syftar Temporal API till att ÄtgÀrda dessa brister och tillhandahÄlla en modern, intuitiv och tidzonsmedveten lösning för datum- och tidshantering i JavaScript.
Vad Àr Temporal API?
Temporal API Àr ett nytt globalt objekt, Temporal, som tillhandahÄller ett modernt och standardiserat sÀtt att arbeta med datum och tider i JavaScript. Det Àr utformat för att ersÀtta det gamla Date-objektet och erbjuder betydande förbÀttringar nÀr det gÀller API-design, oförÀnderlighet, stöd för tidszoner och övergripande anvÀndbarhet. Det Àr en del av ECMAScript-förslaget och implementeras i stora JavaScript-motorer.
Viktiga fördelar med Temporal API:
- OförÀnderlighet: Temporala objekt Àr oförÀnderliga, vilket innebÀr att operationer pÄ dem returnerar nya objekt istÀllet för att modifiera originalet. Detta hjÀlper till att förhindra ovÀntade biverkningar och gör koden lÀttare att förstÄ.
- Tydligt API: API:et Àr utformat för att vara mer intuitivt och konsekvent Àn det gamla
Date-objektet. - Tidszonsstöd: Temporal ger robust stöd för tidszoner, vilket gör att du kan arbeta med datum och tider pÄ olika platser runt om i vÀrlden.
- Kalenderstöd: Utöver den gregorianska kalendern tillÄter API:et att anvÀnda andra kalendersystem, vilket underlÀttar globala applikationer.
- Skottsekundshantering: Temporal API tar hÀnsyn till skottsekunder och ger mer exakta tidsberÀkningar.
Komma igÄng med Temporal
Ăven om Temporal API fortfarande Ă€r under utveckling och Ă€nnu inte stöds fullt ut i alla webblĂ€sare och Node.js-miljöer, kan du anvĂ€nda en polyfill för att börja experimentera med det idag. Du kan installera polyfill via npm:
npm install @js-temporal/polyfill
Importera sedan polyfill i din JavaScript-kod:
import { Temporal } from '@js-temporal/polyfill';
NÀr polyfill Àr installerat kan du börja anvÀnda Temporal-objektet och dess olika klasser.
KĂ€rnklasser i Temporal
Temporal API tillhandahÄller flera nyckelklasser för att arbeta med datum och tider:
Temporal.PlainDate: Representerar ett kalenderdatum (Är, mÄnad och dag) utan nÄgon tidszon eller tid pÄ dygnet.Temporal.PlainTime: Representerar en tid pÄ dygnet (timme, minut, sekund och brÄkdel av en sekund) utan nÄgon datum- eller tidszonsinformation.Temporal.PlainDateTime: Representerar ett datum och en tid utan nÄgon tidszonsinformation.Temporal.ZonedDateTime: Representerar ett datum och en tid med en specifik tidszon.Temporal.Instant: Representerar en specifik tidpunkt, mÀtt i nanosekunder sedan Unix-epoken (1 januari 1970, kl. 00:00:00 Coordinated Universal Time (UTC)).Temporal.TimeZone: Representerar en tidszon.Temporal.Duration: Representerar en tidsperiod, sÄsom timmar, minuter eller sekunder.Temporal.Now: Ger Ätkomst till aktuellt datum och tid.
Arbeta med PlainDate
Klassen Temporal.PlainDate representerar ett datum utan nÄgon tidszon eller tid pÄ dygnet. Den Àr anvÀndbar för att representera födelsedagar, Ärsdagar eller andra datumbaserade hÀndelser.
Skapa en PlainDate:
const plainDate = Temporal.PlainDate.from({ year: 2024, month: 10, day: 26 });
console.log(plainDate.toString()); // Output: 2024-10-26
Du kan ocksÄ skapa en PlainDate frÄn en strÀng i ISO 8601-format:
const plainDateFromString = Temporal.PlainDate.from('2024-12-25');
console.log(plainDateFromString.toString()); // Output: 2024-12-25
Ă tkomst till datumkomponenter:
const year = plainDate.year; // 2024
const month = plainDate.month; // 10
const day = plainDate.day; // 26
const dayOfWeek = plainDate.dayOfWeek; // Veckodag (1-7, mÄndag-söndag)
const dayOfYear = plainDate.dayOfYear; // Dag pÄ Äret (1-366)
const daysInMonth = plainDate.daysInMonth; // Antal dagar i mÄnaden
const isLeapYear = plainDate.isLeapYear; // Boolesk som indikerar om Äret Àr ett skottÄr
LĂ€gga till och subtrahera dagar:
const nextDay = plainDate.add({ days: 1 });
console.log(nextDay.toString()); // Output: 2024-10-27
const previousWeek = plainDate.subtract({ weeks: 1 });
console.log(previousWeek.toString()); // Output: 2024-10-19
JÀmföra datum:
const anotherDate = Temporal.PlainDate.from({ year: 2024, month: 11, day: 15 });
if (plainDate.equals(anotherDate)) {
console.log('Datumen Àr lika');
} else if (plainDate.lessThan(anotherDate)) {
console.log('plainDate Àr tidigare Àn anotherDate');
} else {
console.log('plainDate Àr senare Àn anotherDate');
}
// Output: plainDate Àr tidigare Àn anotherDate
Arbeta med PlainTime
Klassen Temporal.PlainTime representerar en tid pÄ dygnet utan nÄgon datum- eller tidszonsinformation. Den Àr anvÀndbar för att representera öppettider, mötestider eller andra tidsbaserade hÀndelser.
Skapa en PlainTime:
const plainTime = Temporal.PlainTime.from({ hour: 14, minute: 30, second: 0 });
console.log(plainTime.toString()); // Output: 14:30:00
Du kan ocksÄ skapa en PlainTime frÄn en strÀng i ISO 8601-format:
const plainTimeFromString = Temporal.PlainTime.from('09:00:00');
console.log(plainTimeFromString.toString()); // Output: 09:00:00
Ă tkomst till tidskomponenter:
const hour = plainTime.hour; // 14
const minute = plainTime.minute; // 30
const second = plainTime.second; // 0
const millisecond = plainTime.millisecond; // 0
const microsecond = plainTime.microsecond; // 0
const nanosecond = plainTime.nanosecond; // 0
LĂ€gga till och subtrahera tid:
const laterTime = plainTime.add({ minutes: 15 });
console.log(laterTime.toString()); // Output: 14:45:00
const earlierTime = plainTime.subtract({ hours: 1 });
console.log(earlierTime.toString()); // Output: 13:30:00
JÀmföra tider:
const anotherTime = Temporal.PlainTime.from({ hour: 15, minute: 0, second: 0 });
if (plainTime.equals(anotherTime)) {
console.log('Tiderna Àr lika');
} else if (plainTime.lessThan(anotherTime)) {
console.log('plainTime Àr tidigare Àn anotherTime');
} else {
console.log('plainTime Àr senare Àn anotherTime');
}
// Output: plainTime Àr tidigare Àn anotherTime
Arbeta med PlainDateTime
Klassen Temporal.PlainDateTime representerar ett datum och en tid utan nÄgon tidszonsinformation. Den kombinerar funktionaliteten i PlainDate och PlainTime.
Skapa en PlainDateTime:
const plainDateTime = Temporal.PlainDateTime.from({ year: 2024, month: 10, day: 26, hour: 14, minute: 30, second: 0 });
console.log(plainDateTime.toString()); // Output: 2024-10-26T14:30:00
Du kan ocksÄ skapa en PlainDateTime frÄn en strÀng i ISO 8601-format:
const plainDateTimeFromString = Temporal.PlainDateTime.from('2024-12-25T09:00:00');
console.log(plainDateTimeFromString.toString()); // Output: 2024-12-25T09:00:00
Ă tkomst till datum- och tidskomponenter:
const year = plainDateTime.year; // 2024
const month = plainDateTime.month; // 10
const day = plainDateTime.day; // 26
const hour = plainDateTime.hour; // 14
const minute = plainDateTime.minute; // 30
const second = plainDateTime.second; // 0
LĂ€gga till och subtrahera datum och tider:
const nextDayAndTime = plainDateTime.add({ days: 1, hours: 2 });
console.log(nextDayAndTime.toString()); // Output: 2024-10-27T16:30:00
const previousWeekAndTime = plainDateTime.subtract({ weeks: 1, minutes: 30 });
console.log(previousWeekAndTime.toString()); // Output: 2024-10-19T14:00:00
Konvertera till PlainDate och PlainTime:
const plainDateFromDateTime = plainDateTime.toPlainDate();
console.log(plainDateFromDateTime.toString()); // Output: 2024-10-26
const plainTimeFromDateTime = plainDateTime.toPlainTime();
console.log(plainTimeFromDateTime.toString()); // Output: 14:30:00
Arbeta med ZonedDateTime
Klassen Temporal.ZonedDateTime representerar ett datum och en tid med en specifik tidszon. Detta Àr avgörande för applikationer som behöver hantera datum och tider pÄ olika platser runt om i vÀrlden. Till skillnad frÄn det gamla Date-objektet har Temporal inbyggt stöd för tidszoner.
Skapa en ZonedDateTime:
const zonedDateTime = Temporal.ZonedDateTime.from({ year: 2024, month: 10, day: 26, hour: 14, minute: 30, second: 0, timeZone: 'America/Los_Angeles' });
console.log(zonedDateTime.toString()); // Output: 2024-10-26T14:30:00-07:00[America/Los_Angeles]
Du kan ocksÄ skapa en ZonedDateTime frÄn en Instant och en tidszon:
const instant = Temporal.Instant.fromEpochSeconds(1666785000); // Exempel pÄ tidsstÀmpel
const zonedDateTimeFromInstant = instant.toZonedDateTimeISO('Europe/London');
console.log(zonedDateTimeFromInstant.toString()); // Utdata varierar beroende pÄ den faktiska tidpunkten men Äterspeglar datum/tid i Europa/London
Ă tkomst till datum- och tidskomponenter:
const year = zonedDateTime.year; // 2024
const month = zonedDateTime.month; // 10
const day = zonedDateTime.day; // 26
const hour = zonedDateTime.hour; // 14
const minute = zonedDateTime.minute; // 30
const second = zonedDateTime.second; // 0
const timeZone = zonedDateTime.timeZone; // Temporal.TimeZone-objekt
Konvertera mellan tidszoner:
const newYorkDateTime = zonedDateTime.withTimeZone('America/New_York');
console.log(newYorkDateTime.toString()); // Output: 2024-10-26T17:30:00-04:00[America/New_York]
Hantering av sommartid (DST):
Temporal hanterar automatiskt DST-övergÄngar. NÀr du lÀgger till eller subtraherar tid tar den hÀnsyn till DST, vilket sÀkerstÀller korrekta resultat. TÀnk till exempel pÄ ett möte som Àr schemalagt över DST-övergÄngen i Tyskland:
const meetingStart = Temporal.ZonedDateTime.from({ year: 2024, month: 3, day: 31, hour: 2, minute: 30, timeZone: 'Europe/Berlin' });
const meetingEnd = meetingStart.add({ hours: 1 }); // LĂ€gger till 1 timme
console.log(meetingEnd.toString()); // Output: 2024-03-31T03:30:00+02:00[Europe/Berlin]. Observera att förskjutningen Àndras pÄ grund av DST
Arbeta med Instant
Klassen Temporal.Instant representerar en specifik tidpunkt, mÀtt i nanosekunder sedan Unix-epoken. Den Àr anvÀndbar för att lagra och jÀmföra exakta tidpunkter.
Skapa en Instant:
const instant = Temporal.Instant.fromEpochSeconds(1666785000); // Exempel pÄ Unix-tidsstÀmpel i sekunder
console.log(instant.toString()); // Utdata kommer att vara en ISO-strÀngrepresentation av den tidpunkten
Konvertera till ZonedDateTime:
const zonedDateTimeFromInstant = instant.toZonedDateTimeISO('America/Los_Angeles');
console.log(zonedDateTimeFromInstant.toString()); // Utdata: Datum och tid i America/Los_Angeles motsvarande den tidpunkten
JÀmföra Instant:
const anotherInstant = Temporal.Instant.fromEpochSeconds(1666790000);
if (instant.equals(anotherInstant)) {
console.log('Tidpunkterna Àr lika');
} else if (instant.lessThan(anotherInstant)) {
console.log('instant Àr tidigare Àn anotherInstant');
} else {
console.log('instant Àr senare Àn anotherInstant');
}
// Output: instant Àr tidigare Àn anotherInstant
Arbeta med Duration
Klassen Temporal.Duration representerar en tidsperiod, sÄsom timmar, minuter eller sekunder. Den Àr anvÀndbar för att berÀkna skillnaden mellan tvÄ datum eller tider.
Skapa en Duration:
const duration = Temporal.Duration.from({ hours: 2, minutes: 30 });
console.log(duration.toString()); // Output: PT2H30M
BerÀkna skillnaden mellan datum/tider:
const startDate = Temporal.PlainDateTime.from({ year: 2024, month: 1, day: 1, hour: 0, minute: 0, second: 0 });
const endDate = Temporal.PlainDateTime.from({ year: 2024, month: 1, day: 3, hour: 12, minute: 30, second: 0 });
const difference = endDate.since(startDate);
console.log(difference.toString()); // Output: P2DT12H30M
// Ă
tkomst till komponenterna i varaktigheten
console.log(difference.days); // 2
console.log(difference.hours); // 12
console.log(difference.minutes); // 30
LĂ€gga till varaktighet till datum/tider:
const newDate = startDate.add(duration);
console.log(newDate.toString()); // Output: 2024-01-03T02:30:00
Arbeta med kalendrar
Temporal API stöder olika kalendersystem utöver den gregorianska kalendern. Ăven om det inte Ă€r fullt implementerat i alla polyfyllningar och motorer Ă€nnu, Ă€r avsikten att tillĂ„ta applikationer att hantera datum i kalendrar som Ă€r specifika för olika kulturer. För att till exempel anvĂ€nda den japanska kalendern (hypotetiskt, eftersom implementeringen fortfarande utvecklas):
// Detta Àr ett konceptuellt exempel eftersom kalenderstödet fortfarande Àr under utveckling
// const japaneseDate = Temporal.PlainDate.from({ year: 2024, month: 10, day: 26, calendar: 'japanese' });
// console.log(japaneseDate.toString()); // FörvÀntat: Utdata formaterad enligt den japanska kalendern
Obs: Kalenderstöd Àr en funktion i Temporal API som utvecklas, och full funktionalitet Àr Ànnu inte allmÀnt tillgÀnglig.
Praktiska exempel och anvÀndningsfall
Temporal API erbjuder ett brett spektrum av möjligheter för att hantera datum och tider i JavaScript. HÀr Àr nÄgra praktiska exempel och anvÀndningsfall:
- SchemalÀgga möten: Skapa en schemalÀggningsapplikation som lÄter anvÀndare boka möten i sin lokala tidszon. Temporal.ZonedDateTime gör det enkelt att konvertera mellan tidszoner och hantera DST-övergÄngar. För en klinik i Berlin som schemalÀgger möten globalt:
- BerÀkna Älder: FaststÀlla en anvÀndares Älder baserat pÄ deras födelsedatum. PlainDate lÄter dig representera födelsedatumet utan nÄgon tidszonsinformation.
- Visa datum och tider i olika format: Formatera datum och tider enligt anvĂ€ndarens sprĂ„k. Ăven om internationaliseringsfunktioner (Intl) Ă€r separata, kan Temporal-objekt enkelt formateras med
toLocaleString()eller liknande metoder i kombination med Intl API-funktioner. - SpÄra hÀndelsers varaktighet: BerÀkna varaktigheten för en hÀndelse och visa den i ett lÀsbart format. Duration lÄter dig representera tidsskillnaden mellan tvÄ datum eller tider.
const appointmentTimeBerlin = Temporal.ZonedDateTime.from({ year: 2024, month: 11, day: 5, hour: 10, minute: 0, timeZone: 'Europe/Berlin' });
const appointmentTimeLA = appointmentTimeBerlin.withTimeZone('America/Los_Angeles');
console.log(`Mötestid i Berlin: ${appointmentTimeBerlin.toString()}`);
console.log(`Mötestid i Los Angeles: ${appointmentTimeLA.toString()}`);
const birthDate = Temporal.PlainDate.from({ year: 1990, month: 5, day: 15 });
const today = Temporal.Now.plainDateISO();
const age = today.year - birthDate.year - (today.month < birthDate.month || (today.month === birthDate.month && today.day < birthDate.day) ? 1 : 0);
console.log(`Ă
lder: ${age}`);
const zonedDateTimeNow = Temporal.Now.zonedDateTimeISO('en-GB');
console.log(zonedDateTimeNow.toLocaleString('en-GB'));
console.log(zonedDateTimeNow.toLocaleString('de-DE'));
const eventStart = Temporal.Instant.fromEpochSeconds(1700000000); // Exempel pÄ starttidsstÀmpel
const eventEnd = Temporal.Instant.fromEpochSeconds(1700005000); // Exempel pÄ sluttidsstÀmpel
const durationOfEvent = eventEnd.since(eventStart);
console.log(`HĂ€ndelsens varaktighet: ${durationOfEvent.minutes} minuter`);
BÀsta praxis för att anvÀnda Temporal API
HÀr Àr nÄgra bÀsta metoder att tÀnka pÄ nÀr du anvÀnder Temporal API:- AnvÀnd oförÀnderlighet: Omfamna oförÀnderligheten hos Temporal-objekt. Undvik att modifiera objekt direkt. Skapa istÀllet nya objekt med metoder som
add,subtractochwith. - Hantera tidszoner noggrant: Var uppmÀrksam pÄ tidszoner nÀr du arbetar med datum och tider. AnvÀnd
ZonedDateTimenÀr du behöver representera datum och tider i en specifik tidszon. - AnvÀnd tydliga variabelnamn: AnvÀnd beskrivande variabelnamn som tydligt indikerar vilken typ av Temporal-objekt som anvÀnds (t.ex.
plainDate,zonedDateTime,duration). - ĂvervĂ€g polyfyllningar: Eftersom Temporal fortfarande Ă€r relativt nytt, sĂ€kerstĂ€ll tillrĂ€ckligt stöd genom att anvĂ€nda ett polyfill-bibliotek vid behov.
- Validera indata: Validera alltid anvÀndarindata för att sÀkerstÀlla att datum och tider Àr i rÀtt format.
Migrering frÄn gamla Date
Migrering frĂ„n det gamla Date-objektet kan vara en gradvis process. ĂvervĂ€g dessa strategier:
- Inkrementell adoption: Börja med att anvÀnda Temporal i ny kod samtidigt som du behÄller
Datei befintliga delar av din applikation. - Omslagsfunktioner: Skapa omslagsfunktioner som konverterar mellan
Dateoch Temporal-objekt för att underlÀtta samverkan under migreringen. - Grundlig testning: Testa migreringen omfattande för att sÀkerstÀlla att alla datum- och tidsberÀkningar Àr korrekta.
Temporal API vs. Moment.js
Moment.js var ett populÀrt bibliotek för datum- och tidshantering i JavaScript, men det anses nu vara ett Àldre projekt och Àr i underhÄllslÀge. Temporal API tillhandahÄller en modernare och standardiserad lösning som ÄtgÀrdar mÄnga av bristerna i Moment.js. Moment.js Àr förÀnderligt och saknar inbyggt tidszonsstöd. Temporal API Àr oförÀnderligt och har inbyggt tidszonsstöd.
Slutsats
JavaScript Temporal API representerar en betydande förbĂ€ttring jĂ€mfört med det gamla Date-objektet. Dess oförĂ€nderlighet, tydliga API, tidszonsstöd och kalenderstöd gör det till ett kraftfullt verktyg för att hantera datum och tider i moderna JavaScript-applikationer. Ăven om anvĂ€ndningen fortfarande vĂ€xer, kan du med en polyfill börja utnyttja dess fördelar idag. Eftersom API:et blir mer allmĂ€nt stött, förvĂ€ntas det bli standard sĂ€ttet att arbeta med datum och tider i JavaScript.
Omfamna Temporal API och lÄs upp ett effektivare och mer pÄlitligt sÀtt att hantera datum och tider i dina projekt, vilket sÀkerstÀller att din applikation hanterar globala tidszoner och berÀkningar korrekt.